<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="Tab Weather Widget Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!-- //for-mobile-apps -->
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/raccordion.css" />
    <script type="text/javascript">
        $(window).load(function () {
            $('#accordion-wrapper').raccordion({
                speed: 1000,
                sliderWidth: 700,
                sliderHeight: 300,
                autoCollapse: false
            });

        }); 
    </script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>食否·你想要的全都有</title>
<!--存session-->

</head>
<body>

<div class="content" id="Main-Content">
	<h1>食否 · 你想要的，我们全都有</h1>
	<div class="wrapper">
		<div id="accordion-wrapper">
            <div class="slide">
                <img src="img/idx1.jpg" />
				<div class="caption">
                    <div class="pricing">
							<div class="pricing-top green-top">
								<h3>火炙鳗鱼</h3>
								<p>￥<span>9.52</span>/份</p>
							</div>
							<div class="pricing-bottom">
								<div class="pricing-bottom-bottom">
									<p><span>精选</span>新鲜鳗鱼</p>
									<p><span>450g </span> 每份</p>
									<p><span>手心</span> 的温度</p>  
									<p><span>做出</span> 最好的鳗鱼手卷</p>
									<p class="text"><span>月售197份</span> 好评率100%</p>
								</div>
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog">注册</a>
								</div>
								
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog-login">登录</a>
								</div>
								
							</div>
					</div>
                </div>
            </div>
            <div class="slide">
                <img src="img/idx2.jpg" />
				<div class="caption">
                    <div class="pricing">
							<div class="pricing-top blue-top">
								<h3>一人悠哉</h3>
								<p>￥<span>38</span>/份</p>
							</div>
							<div class="pricing-bottom">
								<div class="pricing-bottom-bottom">
									<p><span>小煲</span> 适合1人份</p>
									<p><span>排骨酥香 </span> 入味</p>
									<p><span>米饭</span> 另点</p>  
									<p><span>配菜：</span> 土豆、胡萝卜、西蓝花</p>
									<p class="text"><span>月售200份</span> 好评率99.7%</p>
								</div>
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog">注册</a>
								</div>
								
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog-login">登录</a>
								</div>
							</div>
						</div>
                </div>
            </div>
            <div class="slide">
				<img src="img/idx3.jpg" />
				<div class="caption">
                    <div class="pricing">
							<div class="pricing-top">
								<h3>香肠蒸豆米</h3>
								<p>￥<span>12</span>/份</p>
							</div>
							<div class="pricing-bottom">
								<div class="pricing-bottom-bottom">
									<p><span>另类的</span> “江南腌笃鲜”</p>
									<p><span>米饭 </span>完美搭档</p>
									<p><span>既保留了</span> 时令菜的滋味</p>  
									<p><span>更创新了</span> 时令菜的口感</p>
									<p class="text"><span>月售365份</span>好评率96%</p>
								</div>
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog">注册</a>
								</div>
								
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog-login">登录</a>
								</div>
							</div>
					</div>
                </div>
            </div>
            <div class="slide">
                <img src="img/idx4.jpg" />
				<div class="caption">
					<div class="pricing">
							<div class="pricing-top yellow-top">
								<h3>切达热狗棒</h3>
								<p>￥<span>11.2</span>/根</p>
							</div>
							<div class="pricing-bottom">
								<div class="pricing-bottom-bottom">
									<p><span>哇哇哇，</span>double cheese</p>
									<p><span>马苏里拉 </span> 和切达奶酪完美结合</p>
									<p><span>真的</span> 太棒了！</p>  
									<p><span>喜欢芝士的你</span> 千万别错过</p>
									<p class="text"><span>月售112份</span> 好评率98%</p>
								</div>
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog">注册</a>
								</div>
								
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog-login">登录</a>
								</div>
							</div>
					</div>
				</div>
            </div>
            <div class="slide">
                <img src="img/idx5.jpg" />
				<div class="caption">
					<div class="pricing">
							<div class="pricing-top pink-top">
								<h3>柳州螺蛳粉</h3>
								<p>$<span>13</span>/份</p>
							</div>
							<div class="pricing-bottom">
								<div class="pricing-bottom-bottom">
									<p><span>臭？</span> 香！</p>
									<p><span>酸笋</span> 腐竹，木耳</p>
									<p><span>柳州</span> 特有的味道</p>  
									<p><span>汤汁</span> 浓醇鲜甜</p>
									<p class="text"><span>月售98份</span> 好评率97%</p>
								</div>
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog">注册</a>
								</div>
								
								<div class="buy-button green-button">
									<a class="popup-with-zoom-anim" href="#small-dialog-login">登录</a>
								</div>
							</div>
					</div>
				</div>	
            </div>
        </div>
    </div>
	<!--pop-up-grid-->
	<div id="popup">
		<div id="small-dialog" class="mfp-hide">
		<!--注册-->
			<div class="signin-form profile">
				<h3>注册</h3>
				
				<div class="login-form">
						<input type="email" name="u_email" placeholder="-手机号-" required="" id="phonenumber">
						<input type="text" name="u_name" placeholder="-用户名-" required="" id="username">
						<input type="password" name="u_pwd" placeholder="-密码-" required="" id="password">
						<input type="password" name="reu_pwd" placeholder="-确认密码-" required="" id="repassword">
						<input type="text" name="u_address" placeholder="-用户地址-" required="" id="useraddress">
						<button id="register">注册</button>
					</form>
				</div>
			</div>
		</div>
		</div>
			<!-- 登录 -->
			<div id="popup">
			<div id="small-dialog-login" class="mfp-hide">
			<div class="signin-form profile">
				<h3>登录</h3>
				
				<div class="login-form">				
						<input type="text" name="u_name" placeholder="-用户名-" required="" id="username">
						<input type="password" name="u_pwd" placeholder="-密码-" required="" id="password">
						<button id="login">登陆</button>
				</div>
			</div>
			</div>
			
		
	</div>						
	<!--pop-up-grid-->

	<!--copyright-->
	<div class="w3ls-copyright">
		<p>© 2017 ShiFou . All Rights Reserved  | Design by <a href="" target="_blank">Doubleu</a> </p>
	</div>
	<!--//copyright-->
</div>
<script src="js/jquery.raccordion.js" type="text/javascript"></script>
<script src="js/jquery.animation.easing.js" type="text/javascript"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
	<script>
		$(document).ready(function() {
			$('.popup-with-zoom-anim').magnificPopup({
				type: 'inline',
				fixedContentPos: false,
				fixedBgPos: true,
				overflowY: 'auto',
				closeBtnInside: true,
				preloader: false,
				midClick: true,
				removalDelay: 300,
				mainClass: 'my-mfp-zoom-in'
		});
																						
	});
	</script>
<!--登陆账号、密码传值给后端-->
	<script>
		$("#login").click(function(){
			$.ajax({
				url:'http://localhost:9523/eto/customer/login',
				data:{
					username:$("#username").val(),
					password:$("#password").val()
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:1000000,//超时时间设置为10秒；
				success:function(data){	//成功请求到url中的数据
					console.log(data)
					console.log($("#username").text())
					$("#username").text(data.customerName)
					if (data) {//根据返回值进行跳转
 					var d = new Date();
 					d.setTime(d.getTime()+(60*60));
 					var expires = "expires="+d.toGMTString();
 					document.cookie = "customerNo="+data.customerNo+"; "+expires;
					document.cookie = "customerName="+data.customerName+"; "+expires;
					document.cookie = "customerLevel="+data.customerLevel+"; "+expires;
					document.cookie = "customerPhoneNumber="+data.customerPhoneNumber+"; "+expires;
					document.cookie = "customerAddress="+data.customerAddress+"; "+expires;
 					console.log(document.cookie)
					window.location.href = 'shops.html';
					}
				},
				error:function(xhr,type,errorThrown){	//请求url中的数据,失败
					console.log(errorThrown)
				}
			});
		})
		<!--注册账号、密码传值给后端-->
		$("#register").click(function(){
			$.ajax({
				url:'http://localhost:9523/eto/customer/register',
				data:{
					username:$("#username").val(),
					customerPhoneNumber:$("#phonenumber").val(),
					password:$("#password").val(),
					customerAddress:$("useraddress").val()
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){	//成功请求到url中的数据
					console.log(data)
					console.log($("#username").text())
					$("#username").text(data.customerName)
// 					if (data) {//根据返回值进行跳转
// 						window.location.href = 'http://www.baidu.com ';
// 					}
				},
				error:function(xhr,type,errorThrown){	//请求url中的数据,失败
					console.log(errorThrown)
				}
			});
		})
	</script>
</body>
</html>